<!-- 企业注册 -->
<template>
    <div class="enterprise-register-contain">
        <Header></Header>
        <div class="nav-logo">
            <router-link to="/">
                <img src="../../assets/logo/logo-login.png" alt="" width="180">
            </router-link>
        </div>
        <div class="content-contain pt30 mt40 mb40">
            <div class="container pt30 pb30 white-bg">
                <div class="text-r" style="position: relative;right: -90px;">
                    <router-link to="/reg">
                        个人注册
                        <i class="el-icon-arrow-right ml5"></i>
                    </router-link>
                </div>
                <h1 class="mt30 mb30 fs36 text-c">
                    企业注册
                </h1>
                <div class="pt30 flex-row-space-between">
                    <div>
                        <h2 class="fs16 bold green">
                            1-企业信息
                        </h2>
                        <ul>
                            <li class="mt20">
                                <el-input v-model="params.companyName.val" placeholder="请输入企业名称"
                                          class="full-width"></el-input>
                                <div class="red tips-contain">
									<span v-show="params.companyName.tips">
										请输入企业名称
									</span>
                                </div>
                            </li>
                            <li>
                                <el-input v-model="params.companyPerson.val" placeholder="请输入企业联系人"
                                          class="full-width"></el-input>
                                <div class="red tips-contain">
									<span v-show="params.companyPerson.tips">
										请输入企业联系人
									</span>
                                </div>
                            </li>
                            <li>
                                <el-input v-model="params.phone.val" maxlength="11" placeholder="请输入手机号码"
                                          class="full-width"></el-input>
                                <div class="red tips-contain">
									<span v-show="params.phone.tips">
										请输入手机号码 或者 固定电话
									</span>
                                </div>
                            </li>
                            <li>
                                <el-input v-model="params.areaCode.val" placeholder="区号" maxlength="4" class="mr10"
                                          style="width: 90px;"></el-input>
                                <el-input v-model="params.tel.val" placeholder="固定电话" maxlength="7" class="mr10"
                                          style="width: 132px;"></el-input>
                                <el-input v-model="params.ext.val" placeholder="分机号" style="width: 90px;"></el-input>
                                <div class="red tips-contain">
									<span v-show="params.tel.tips">
										请输入手机号码 或者 固定电话
									</span>
                                </div>
                            </li>
                            <li class="auxiliary-text">
                                固定电话和手机号码至少填写一项
                            </li>
                        </ul>
                    </div>
                    <div>
                        <h2 class="fs16 bold green inline-block mr10">
                            2-账户信息
                        </h2>
                        <span class="auxiliary-text fs14">
							用于登录泉台人力银行 
						</span>
                        <ul>
                            <li class="mt20">
                                <el-input v-model="params.userName.val" placeholder="请输入用户名"
                                          class="full-width"></el-input>
                                <div class="red tips-contain">
									<span v-show="params.userName.tips">
										请输入用户名
									</span>
                                </div>
                            </li>
                            <li>
                                <el-input v-model="params.email.val" placeholder="请输入邮箱地址"
                                          class="full-width"></el-input>
                                <div class="red tips-contain">
									<span v-show="params.email.tips">
										请输入邮箱地址
									</span>
                                </div>
                            </li>
                            <li>
                                <el-input v-model="params.password.val" show-password placeholder="请输入账户密码"
                                          class="full-width"></el-input>
                                <div class="red tips-contain">
									<span v-show="params.password.tips">
										请输入账户密码
									</span>
                                </div>
                            </li>
                            <li>
                                <el-input v-model="params.confirmPassword.val" show-password placeholder="请确认密码"
                                          class="full-width"></el-input>
                                <div class="red tips-contain">
									<span v-show="params.confirmPassword.tips">
										请确认密码
									</span>
                                    <span v-show="params.confirmPassword.error">
										两次密码不一致，请重新输入
									</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="text-c auxiliary-text pt30 mt30 mb15">
                    <el-checkbox v-model="agree" class="mr5"></el-checkbox>
                    我已阅读并同意
                    <a href="javascript:;" @click="dialogVisible = true">《用户服务协议》</a>
                </div>
                <div @click="toRegister" class="register-btns pointer white green-bg pt15 pb15 text-c">
                    注册
                </div>
                <div class="pt40 mt30 text-c">
                    已有账号，去
                    <router-link to="/MainLogin" class="green bold">登录</router-link>
                </div>
            </div>
        </div>
        <Footer></Footer>
        
        <el-dialog
            title="《用户服务协议》"
            :visible.sync="dialogVisible"
            width="750"
            :show-close = 'false'
            :before-close="handleClose">
            
            <div class="content">
                <p>甲乙双方就乙方加入甲方主办的“泉台人力银行”会员事宜达成以下协议：</p>
                <p>一、 乙方加入会员的条件：接受并遵守甲方的会员（信息）管理规定，即可成为“泉台人力银行”的正式会员。</p>
                <p>二、乙方在会员期内可以享受以下权限：</p>
                <p>1、通过会员渠道在“泉台人力银行”上登录、管理本单位的招聘信息，由甲方以尽快速度审核转储后，发布招聘信息在“泉台人力银行”的专门栏目（“企业招聘频道，搜索项等相关栏目”，但不包括需要另外再收费的栏目）。乙方的招聘信息须符合国家、省、市有关规定。</p>
                <p>2、通过会员渠道查询“泉台人力银行”的人才信息库。乙方所查取的应聘人员资料仅限本单位招聘使用，不得用作他途，并应尽妥善保管和处理的责任。甲方负有对入库资料进行基本审核的义务，但鉴于网络管理的实际困难，甲方不保证其资料的真实性、准确性。乙方在使用信息时，负有进一步核实的义务和责任。</p>
                <p>三、乙方违约事项：</p>
                <p>1、招聘内容不符合国家法律法规相关规定；</p>
                <p>2、向其他单位和个人转借、转让、共享会员权限，或代发、代查招聘、应聘信息；</p>
                <p>3、将“泉台人力银行”会员资格用于中介、赢利或不正当活动；</p>
                <p>4、乙方在会员资格期内因各种原因引起的运营中止；</p>
                <p>5、乙方执照变更而未及时送甲方备案；</p>
                <p>6、乙方涉及重要事项（如地址、联系方式等）变动而未及时修改会员信息。</p>
                <p>甲方对以上违约行为有权予以纠正直至中止服务，责任由乙方自负。</p>
                <p>四、乙方因用户名和密码保管不善，导致会员资格被第三方冒（盗）用，责任由乙方自负。为保护双方合法权益，任何一方发现该类问题后均有义务及时采取修补措施，并且甲方有权暂时冻结乙方权限。</p>
                <p>五、其他事项</p>
                <p>1、如遇不可抗因素（如电信、电力中断等）导致甲方服务中断或故障，不在甲方的责任范围，但甲方应善尽及时修复的义务。</p>
                <p>2、甲方不保证招聘效果，例如：招聘职位访问量，应聘人员多少及是否招聘到合适人员。</p>
                <p>3、因为招聘信息的公开性，甲方不保证非甲方网站来复制抄录乙方信息，甲方可配合乙方追述外网抄录信息之责任。</p>
                <p>六、本协议一式两份，双方各执一份，经双方正面签字盖章后生效。（此为背面）</p>
                <p>七、经友好协商未能达成共识的，双方可提交泉州任何一法院进行仲裁解决。</p>
            </div>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false; agree = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false; agree = true">确 定</el-button>
            </span>
    </el-dialog>
    </div>
</template>

<script>
import Header from '@/views/components/header/header'
import Footer from '@/views/components/header/footer'
import { setRegister } from '@/api/enterprise/index'
import { getBasicInfo } from '@/api/enterprise/work/center'

export default {
    name: 'EnterpriseRegister',
    components: {
        Header,
        Footer
    },
    data() {
        return {
            input: '',
            params: {
                companyName: { val: '', require: true, tips: false },
                companyPerson: { val: '', require: true, tips: false },
                email: { val: '', require: true, tips: false },
                password: { val: '', require: true, tips: false },
                confirmPassword: { val: '', require: true, tips: false, error: false },
                phone: { val: '', require: false, tips: false },
                tel: { val: '', require: false, tips: false },
                userName: { val: '', require: true, tips: false },
                areaCode: { val: '', require: false },
                ext: { val: '', require: false },
            },
            agree: false,
            dialogVisible: false
        }
    },
    mounted() {
        if (this.$store.getters.nickname) {
            this.getBasicInfo();
        }
    },
    methods: {
        handleClose(){},
        getBasicInfo() {
            getBasicInfo().then(res => {
                if (res.datas.accountId) {
                    this.routerLink('/enterprise/center')
                }
            })
        },
        // 参数校验
        paramsCheck() {
            // true=>通过, false=>不通过
            let check = true
            for (let item in this.params) {
                let objs = this.params[item]
                if (objs['require'] && !objs['val']) {
                    objs['tips'] = true
                    check = false
                } else {
                    objs['tips'] = false
                }
            }

            // 固定电话和手机号码至少填写一项
            if (!this.params.phone.val && !this.params.tel.val) {
                this.params.phone.tips = this.params.tel.tips = true
                check = false
            } else {
                this.params.phone.tips = this.params.tel.tips = false
            }

            // 两次密码填写一致
            if (this.params.password.val === this.params.confirmPassword.val) {
                this.params.confirmPassword.error = false
            } else {
                this.params.confirmPassword.error = true
                check = false
            }
            return check
        },
        // 注册
        toRegister() {
            if (!this.agree) {
                return this.$message.error('请先阅读并同意 《服务中心用户服务协议》')
            }

            if (this.paramsCheck()) {
                let regissterParams = {
                    companyName: this.params.companyName.val,
                    companyPerson: this.params.companyPerson.val,
                    email: this.params.email.val,
                    password: this.params.password.val,
                    confirmPassword: this.params.confirmPassword.val,
                    phone: this.params.phone.val,
                    tel: this.params.tel.val,
                    userName: this.params.userName.val
                }
                setRegister(regissterParams).then(res => {
                    if (res.resp_code === 0) {
                        this.$message.success('注册成功,正在跳转')
                        setTimeout(() => {
                            this.$router.replace('/login')
                        }, 4000)
                    } else {
                        // 注册失败
                        this.$message.error(res.resp_msg)
                    }

                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
/deep/ .top{
    background: #3B4D66
}
</style>
<style lang="scss">
@import url('../../assets/styles/enterprise/common.css');

.enterprise-register-contain {
    .tips-contain {
        height: 25px;
        padding-left: 15px;
    }

    .fs36 {
        font-size: 36px;
        color: #080808;
        font-weight: 400;
    }

    .el-input--medium .el-input__inner {
        height: 48px;
        line-height: 48px;
    }

    .nav {
        background: #f5f5f5;

        .nav-left {
            display: none;
        }
    }

    .nav_conter {
        display: none !important;
    }

    .nav-logo {
        width: 1200px;
        margin: 0 auto;
        padding-top: 50px;
    }

    .content-contain {
        min-height: calc(100vh - 355px)
    }

    .container {
        width: 1030px;
        margin: 0 auto;
        padding-left: 120px;
        padding-right: 120px;
        box-shadow: 10px 10px 15px #ECECEC;

        .auxiliary-text {
            color: #999999;
            vertical-align: bottom;
        }

        .full-width {
            width: 340px;
        }

        .register-btns {
            width: 340px;
            margin: 0 auto;
        }
    }
}
>>>.el-dialog{
    .el-dialog__title{
        display: block;
        text-align: center;
        padding-top: 30px;
    }

    .content{
        font-size: 14px;
        line-height: 1.8;
        padding: 30px;
        padding-top: 0;
        p{
            text-indent: 2em;
        }
    }
}
</style>
